<template>
    <div class="app">
      <h1 @mouseover="playAudio" class="title">AI 都不敢说的话</h1>
      <button @click="loadRandomData" class="button">Golden finger</button>
      <div id="content" class="content"></div>
    </div>
  </template>
  
  <script>
  // import sound from '@/assets/1.wav'; // 使用正确的相对路径引用资源
  
  class APIClient {
    constructor(base_url, api_token) {
      this.base_url = base_url;
      this.api_token = api_token;
      this.headers = {
        accept: 'application/json',
        'xc-auth': this.api_token,
        'xc-token': this.api_token,
        'Content-Type': 'application/json',
      };
    }
  
    async post_data(endpoint, data) {
      const url = `${this.base_url}/${endpoint}`;
      const response = await fetch(url, {
        method: 'POST',
        headers: this.headers,
        body: JSON.stringify(data),
      });
      return response;
    }
  
    async get_count(endpoint) {
      const url = `${this.base_url}/${endpoint}/count`;
      const response = await fetch(url, {
        method: 'GET',
        headers: this.headers,
      });
      return response;
    }
  
    async get_data(endpoint, id) {
      const url = `${this.base_url}/${endpoint}/${id}`;
      const response = await fetch(url, {
        method: 'GET',
        headers: this.headers,
      });
      return response;
    }
  
    async get_random_data(endpoint) {
      try {
        const count_response = await this.get_count(endpoint);
        if (count_response.status === 200) {
          const count_json = await count_response.json();
          const random_id = Math.floor(Math.random() * count_json.count) + 1;
          const data_response = await this.get_data(endpoint, random_id);
          if (data_response.status === 200) {
            const data_json = await data_response.json();
            return data_json.Content;
          } else {
            console.error('请求失败:', data_response.status);
            console.error(await data_response.text());
          }
        } else {
          console.error('请求失败:', count_response.status);
          console.error(await count_response.text());
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  }
  
  export default {
    methods: {
      playAudio() {
        const audio = new Audio(sound);
        // audio.play();
      },
  
      async loadRandomData() {
        const base_url = 'http://1.15.7.2/api/v1/db/data/v1/p8iqwefu1kfsejn';
        const api_token = 'CBAkCNzQNnqYYUC1anRQjNVb38CNPTEnORZDv8yO';
        const api_client = new APIClient(base_url, api_token);
  
        try {
          const content = await api_client.get_random_data('NihaowuyaScrapedDataCsv');
          if (content) {
            document.getElementById('content').innerHTML = content;
          } else {
            console.error('请求失败');
          }
        } catch (error) {
          console.error('请求失败:', error);
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .app {
    background-color: #F5F5F5;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
  }
  
  .title {
    color: #4B0082;
    font-size: 3em;
    animation: color-change 5s infinite;
    margin-top: 50px;
  }
  
  .button {
    background-color: #4B0082;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.5em;
    margin: 50px auto;
    display: block;
    cursor: pointer;
    border-radius: 10px;
    animation: button-pulse 2s infinite;
  }
  
  .content {
    background-color: #F5F5F5;
    border-radius: 10px;
    padding: 20px;
    margin: 0 auto;
    width: 80%;
    min-height: 200px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    font-size: 2em;
    text-align: center;
    color: #4B0082;
    animation: content-fade 5s infinite;
  }
  
  @keyframes color-change {
    0% {
      color: #4B0082;
    }
    50% {
      color: #8A2BE2;
    }
    100% {
      color: #4B0082;
    }
  }
  
  @keyframes button-pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes content-fade {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .button {
      font-size: 1em;
    }
  }
  </style>
  